<template>
  <div id="app">
    <router-view />
    <div class="back-home" v-if="!hiddenRetrun" @click="goIndex">回首页</div>
  </div>
</template>
<script>
export default {
  name: 'app',
  components: {},
  data() {
    return {
      hiddenRetrun: false
    }
  },
  watch: {
    $route: {
      handler(to, from) {
        console.log({ to, from })
        if (to.name == 'index') {
          this.hiddenRetrun = true
        } else {
          this.hiddenRetrun = false
        }
      },
      immediate: true
    }
  },
  methods: {
    goIndex() {
      this.$router.replace({ path: '/' })
    }
  }
}
</script>
<style lang="less">
.back-home {
  position: fixed;
  bottom: 10px;
  right: 15px;
  border-radius: 5px;
  height: 50px;
  width: 50px;
  box-shadow: 3px 3px 2px;
  background-color: #b9caf4;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #2c3e50;
}

#nav {
  padding: 0.3rem;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
